// 购物车系列
var xiaoyuand = document.querySelector(".cxdsp"); //小圆点(数量)
var gouwuc = document.querySelector(".cxdli3"); //购物车 (单独的点击块)
// console.log($(".cxdli3"));
gouwuc.onmouseover = function () {
  //悬浮的时候购物车样式
  xiaoyuand.style.backgroundColor = "#fff";
  xiaoyuand.style.color = "#f42424";
};
gouwuc.onmouseout = function () {
  //离开的时候购物车样式
  xiaoyuand.style.backgroundColor = "#f42424";
  xiaoyuand.style.color = "#fff";
};

// 购物车展开问题
var gouwuczhans = document.querySelector(".gouwu_zhans"); //获取购物车展示区域(展示)
var cebiangouwc = document.querySelector(".publicAich"); //侧边购物车栏
var gouwucjiesu = document.querySelector(".gouwu_jiesuan"); //购物车展示区域的结算区
var gouwugouwuw = document.querySelector(".gouw"); //购物车(全部)

var idd = 0; //点击次数
gouwuc.onclick = function () {
  idd++;
  if (idd % 2 == 0) {
    cebiangouwc.style.right = "0px";
    gouwugouwuw.style.right = "-280px";
    gouwucjiesu.style.right = "-280px";
  } else {
    cebiangouwc.style.right = "280px";
    gouwugouwuw.style.right = "0px";
    gouwucjiesu.style.right = "0px";
  }
};

// 点击关闭购物车 - 关闭按钮
var guanbianniu = document.querySelector(".bi-x-circle"); //获取关闭购物车的按钮

guanbianniu.onclick = function () {
  idd++;
  cebiangouwc.style.right = "0px";
  gouwugouwuw.style.right = "-280px";
  gouwucjiesu.style.right = "-280px";
};
// 购物车 - 添加删除

// 购物车事件
function Gouwcz(datx) {
  datx.innerHTML +=
    `
    <div class="cart-block" data-id="` +
    v.id +
    `">
		<div class="checkbox-wrap">
			<img src="../images/tick.png" class="tick">
			<input type="checkbox" name="" id="" value="" class="checkbox mycheckbox"/>
		</div>
		<img src="` +
    v.data.src +
    `" class="cart-goods-img">
		<div class="cart-goods-info">
			<p class="cart-goods-name">` +
    v.data.title +
    `</p>
			<p class="cart-goods-sku del">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </p>
			<div class="price-wrap">
				<span>￥<span class="price">` +
    v.data.new +
    `</span></span>
				<div class="num-wrap">
					<img src="http://127.0.0.1:8848/%E5%8A%A0%E5%85%A5/images/sub.png" class="sub">
					<input type="number" name="" id="num-input" class="num-input" value="1" readonly/>
					<img src="http://127.0.0.1:8848/%E5%8A%A0%E5%85%A5/images/add.png" class="add">
				</div>
			</div>
		</div>
	</div>
    `;
}

// 购物车事件
var checkboxLen;
var checkedLen = 0;
$(function () {
  var checkbox = document.getElementsByClassName("mycheckbox");
  checkboxLen = checkbox.length;
});

// 多选框-统一
$(document).on("click", ".checkbox", function () {
  if ($(this)[0].checked) {
    // 需变 选中
    $(this).prev().attr("src", "../images/tick-s.png");
  } else {
    // 需变 不选中
    $(this).prev().attr("src", "../images/tick.png");
  }
});

// 多选框-上面
$(document).on("click", ".mycheckbox", function () {
  checkedLen = 0;
  $(".mycheckbox").each(function (index, item) {
    if ($(this)[0].checked) {
      checkedLen++;
    }
  });
  $(".checkedLen").html(checkedLen);
  if (checkedLen == checkboxLen) {
    $(".allselect").prop("checked", true);
    $(".allselect").prev().attr("src", "../images/tick-s.png");
  } else {
    $(".allselect").prop("checked", false);
    $(".allselect").prev().attr("src", "../images/tick.png");
  }
  total();
});

// 多选框-全选
$(document).on("click", ".allselect", function () {
  if ($(this)[0].checked) {
    // 需变 选中
    $(".tick").attr("src", "../images/tick-s.png");
    $(".checkbox").prop("checked", true);
  } else {
    // 需变 不选中
    $(".tick").attr("src", "../images/tick.png");
    $(".checkbox").prop("checked", false);
  }
  checkedLen = 0;
  $(".mycheckbox").each(function (index, item) {
    if ($(this)[0].checked) {
      checkedLen++;
    }
  });
  $(".checkedLen").html(checkedLen);
  total();
});

// 统计金额
function total() {
  var integer = 0;
  $(".mycheckbox").each(function (index, item) {
    if ($(this)[0].checked) {
      var price = Number(
        $(this).parents(".cart-block").find(".price").html().substring(0)
      );
      var num = $(this).parents(".cart-block").find(".num-input").val();
      integer += price * num;
      console.log(price);
    }
  });
  integer = Math.floor(integer * 100) / 100;
  if (isInteger(integer)) {
    $(".integer").html(integer);
    $(".point").html("");
    return;
  }
  var str = integer.toString();
  var index = str.indexOf(".");
  var result = str.substring(index + 1, str.length);
  var integerStr = str.substring(0, index);
  console.log(index);
  console.log(integerStr);
  $(".integer").html(integerStr);
  $(".point").html("." + result);
}

// 数量增减
$(document).on("click", ".sub", function () {
  var val = $(this).parent().find(".num-input").val();
  if (val == 1) {
    return;
  }
  var num = Number(val) - 1;
  $(this).parent().find(".num-input").val(num);
  total();
});

$(document).on("click", ".add", function () {
  var val = $(this).parent().find(".num-input").val();
  var num = Number(val) + 1;
  $(this).parent().find(".num-input").val(num);
  total();
});

function isInteger(obj) {
  return obj % 1 === 0;
}

// 编辑
$(document).on("click", ".cart-operation", function () {
  if ($(this).hasClass("edit")) {
    $(this).removeClass("edit");
    $(this).addClass("delete");
    $(".settlement").hide();
    $(".delete-btn").show();
    $(this).html("完成");
  } else {
    $(".settlement").css("display", "flex");
    $(".delete-btn").hide();
    $(this).addClass("edit");
    $(this).removeClass("delete");
    $(this).html("编辑");
  }
});

// ------------------------ 传输数据 ---------------------------------//

// console.log($(".shangp"));

// var idc;
// // 点击加入本地存储
// $(".shangp").each(function(i,v){
//     $(v).on("click",function(){
//         idc = $(this).attr("data-id");
//         console.log(idc);
//         var objx = localStorage.setItem("id"+idc,idc);
//         // console.log(objx);

//         var strx = localStorage.getItem("id"+idc);
//         // console.log(strx);
//         $('.gouwu_zhans').html("");
//         sjsjs();
//     })
// })

// // //  获取其他页面传入数据
// let dataage = window.localStorage;
// // console.log(dataage);
// // console.log(dataage.id);
// //获取所有数据
// let allData = allObj.clothingData;
// // console.log(allobj);
// // console.log(allData);
// //筛选数据
// var arrNew = new Array;
// for (let k in dataage) {
//     arrNew.push(k);
//     // console.log(k);
// }
// arrNew.splice(arrNew.length - 6, 6);
// var newData = new Array;
// arrNew.map(function(value, i) {
//     return newData.push(allData.filter(function(v, i) {
//         return value.slice(2, 7) == v.id;
//     }));
// })
// // console.log(newData);
// var x = newData.flat();
// // console.log(x);

// sjsjs();

// function sjsjs() {
//     $(x).each(function(i, v) {
//         // console.log(v.data.name);
//         $('.gouwu_zhans').append($('<div class="cart-block" data-id="'+v.id+'"><div class="checkbox-wrap"><img src="../images/tick.png" class="tick"><input type="checkbox" name="" id="" value="" class="checkbox mycheckbox"/></div><img src="'+ v.data.src + '" class="cart-goods-img"><div class="cart-goods-info"><p class="cart-goods-name">'+ v.data.name + '</p><p class="cart-goods-sku del"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg></p><div class="price-wrap"><span><span class="jinqqqq">￥</span><span class="price">'+ v.data.old + '</span></span><div class="num-wrap"><img src="http://127.0.0.1:8848/%E5%8A%A0%E5%85%A5/images/sub.png" class="sub"><input type="number" name="" id="num-input" class="num-input" value="1" readonly/><img src="http://127.0.0.1:8848/%E5%8A%A0%E5%85%A5/images/add.png" class="add"></div></div></div></div>'))

//         // 商品数量变化
//         $(".cxdsp").html($(".cart-block").length);
//         $(".shangpinsl").html($(".cart-block").length);
//         // 有商品的时候 - 小鸟消失
//         if ($(".cart-block").length>0) {
//             $(".zhans_xiaon").remove();
//         }
//         $(".del").each(function(i,v){
//             $(v).on("click change",function(){
//                 var bendiid = $(this).parent().parent().attr("data-id");
//                 localStorage.removeItem("id"+bendiid);
//                 $(this).parent().parent().remove();
//                 total();
//                 $('.gouwu_zhans').html("");
//                 sjsjs();
//             })
//         })
//     })
// }
